/* eslint-disable react/display-name */
// 样式-仪表盘
import React, { useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import Editor from './Editor';
import { InputNumber, Switch, Table } from 'antd';
import InputColorPicker from './InputColorPicker';
import { filterObjectNullKeys } from 'src/libs/utils';
import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons';

interface IProps {
    config: any;
    onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
    form: any;
}

const SingleListType = ( props: IProps ) => {
	const { config, form, onValuesChange } = props;
	const [ dashBoradTitleColor, setdashBoradTitleColor ] = useState( config.style.dashBoradTitleColor || 'rgba(134,188,37,1)' );
	const [ dashBoradColorConfig, setDashBoradColorConfig ] = useState( config.style.dashBoradColorConfig || [] );

	useEffect( () => {
		setdashBoradTitleColor( config.style.dashBoradTitleColor || 'rgba(134,188,37,1)' );
		setDashBoradColorConfig( config.style.dashBoradColorConfig || [] );
	} ,[ config ] );

	const handleDelete = ( text, row, index ) => {
		let arr = dashBoradColorConfig.concat();
		arr.splice( index, 1 );
		setDashBoradColorConfig( arr );
		form.setFieldsValue( { dashBoradColorConfig: arr } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleAddItem = () => {
		let arr = dashBoradColorConfig.concat();
		arr.push( {
			color: '',
			range: 1,
		} );
		setDashBoradColorConfig( arr );
		form.setFieldsValue( { dashBoradColorConfig: arr } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleChangeTitleColorComplete = ( color ) => {
		setdashBoradTitleColor( color );
		form.setFieldsValue( { dashBoradTitleColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleChangeItemColorComplete = ( color, index ) => {
		// console.log( dashBoradColorConfig,color, index );
		let arr = dashBoradColorConfig.concat();
		arr = arr.map( ( t, i ) => {
			if ( i === index ) {
				return {
					...t,
					color: color
				};
			} else {
				return t;
			}
            
		} );
		setDashBoradColorConfig( arr );
		form.setFieldsValue( { dashBoradColorConfig: arr } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleRangeChange = ( value, index ) => {
		// console.log( dashBoradColorConfig, index );
		let arr = dashBoradColorConfig.concat();
		arr = arr.map( ( t, i ) => {
			if ( i === index ) {
				return {
					...t,
					range: value
				};
			} else {
				return t;
			}
            
		} );
		setDashBoradColorConfig( arr );
		form.setFieldsValue( { dashBoradColorConfig: arr } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
		// console.log( dashBoradColorConfig, value, index );
	};

	const columns = [
		{
			title: '颜色',
			key: 'color',
			render: ( text, row, index ) => (
				<InputColorPicker
					color={row.color}
					change={( color ) => handleChangeItemColorComplete( color, index )}
				></InputColorPicker>
			)
		},
		{
			title: '占比',
			key: 'range',
			render: ( text, row, index ) => (
				<InputNumber defaultValue={row.range} onChange={( value ) => handleRangeChange( value, index )} min={1} max={100} />
			)
		},
		{
			title: '操作',
			key: 'action',
			render: ( text, row, index ) => (
				<DeleteOutlined onClick={() => handleDelete( text, row, index )} />
			)
		}
	];
	return (
		<div>
			<FormItem labelCol={{ span: 24 }} label="展示样式" name="dashBoard" labelAlign="left">
				<Editor config={config} form={form} onValuesChange={onValuesChange}
					fontFamilyName="dashBoardFontFamily" fontSizeName="dashBoardFontSize" fontColorName="dashBoardFontColor"
					boldName="dashBoardIsBold" italicName="dashBoardIsItalic" underLineName="dashBoardIsUnderLine"
					alignHorName="dashBoardAlignHor" alignVerName="dashBoardAlignVer" />
			</FormItem>
			<FormItem label="隐藏刻度值" name="hideScale" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch />
			</FormItem>
			<FormItem label="标题颜色" name="dashBoradTitleColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={dashBoradTitleColor}
					change={handleChangeTitleColorComplete}
				></InputColorPicker>
			</FormItem>
			<FormItem labelCol={{ span: 24 }} label="配色项" name="dashBoradColorConfig">
				<PlusSquareOutlined  title="增加" onClick={handleAddItem} />
				<Table
					bordered
					dataSource={dashBoradColorConfig}
					columns={columns}
				/>
			</FormItem>
		</div>
	);

};

export default React.memo( SingleListType );
